<template>
    <Head>
        <Title>云标签</Title>
    </Head>
    <div class="index-navs">
        <NuxtLink to="/">首页</NuxtLink>
        <i class="ri-arrow-right-s-line" />
        <NuxtLink to="/tags">云标签</NuxtLink>
    </div>
    <AppLoading :pending="pending" :total="total === 0">
        <div class="app-tags">
            <Space wrap>
                <NuxtLink v-for="(item, i) in list" :key="i" :to="{ name: 'tags-id', params: { id: item.id } }">
                    <div class="data">
                        <i class="ri-hashtag" />
                        <span>{{ item.name }}</span>
                        <span class="num uuen">({{ item.articles }})</span>
                    </div>
                </NuxtLink>
            </Space>
        </div>
        <!-- 分页 -->
        <div v-if="total > pageSize" class="app-pages">
            <Page :total="total" :page-size="pageSize" :page-num="pageNum" />
        </div>
    </AppLoading>
</template>
<script setup lang="ts">
import '@less/tags.less'

/**
 * 标签集合
 */
const { list, pending, total, pageNum, pageSize } = await tagsApi(states().pageNum)
</script>